<template>
  <div class="left_center_two">
    <Echart id="leftCenterTwo" :options="options" class="left_center_inner" ref="charts"/>
    <div class="pic" v-if="picShow" @click="picShow=false"></div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      options: {},
      picShow:false
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getData() {
      let that=this
      this.init()

      this.$nextTick(() => {
        that.mapClick()
      })

    },
    init() {
      this.options = {
        polar: {
          radius: [20, '88%']
        },
        color:["#6ccafa", "#5fd8ba", "#bdde4a", "#efe82d", "#f7b933", "#fd8317"],
        angleAxis: {
          max: 3000,
          startAngle: 75
        },
        radiusAxis: {
          type: 'category',
          data: ['武进区', '新北区', '溧阳市', '金坛区', '天宁区', '钟楼区'].reverse()
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [2951.58, 1820.4, 1209.43, 1101.09, 888.4, 836.7].reverse(),
          coordinateSystem: 'polar',
          colorBy: 'data',
          label: {
            show: false,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      };
    },
    mapClick() {
      this.$refs.charts.chart.on("click", (params) => {
        console.log(params);
        this.picShow=true
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.left_center_two{
  width: 100%;
  height: 100%;
  position: relative;
  .pic{
    position: absolute;
    top: 0;
    width: 100%;
    height: 98%;
    //padding: 16px 16px 10px 16px;
    background: rgba(0,0,0,.8);
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    background-image: url("../../assets/img/datav/cyxz/cyxz.png");
  }
}
</style>
